<template>
  <el-dialog
      v-model="dialogVisible"
      title="学生详情"
      width="600px"
      destroy-on-close
  >
    <el-descriptions :column="1" border>
      <el-descriptions-item label="姓名">{{ student.name }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ student.email }}</el-descriptions-item>
      <el-descriptions-item label="民族">{{ student.nation }}
      </el-descriptions-item>
      <el-descriptions-item label="政治面貌">{{ student.polit }}
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        <span v-if="student.sex === '1'" style="color: blue">男</span>
        <span v-else-if="student.sex === '2'" style="color: red">女</span>
        <span v-else style="color: gold">未知</span>
      </el-descriptions-item>
      <el-descriptions-item label="出生日期">{{ student.birthday }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号码">{{
          student.mobile
        }}
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {reactive, toRefs} from "vue";

const data = reactive({
  dialogVisible: false, // 控制对话框的显示状态
  student: {
    name: "朱一丹",
    email: "9304905@qq.com",
    nation: "汉族",
    polit: "共产党员",
    sex: "1",
    birthday: "2003-10-11",
    mobile: "15905539558",
  },
});
let {dialogVisible, student} = toRefs(data);
//暴露dialogVisible,父组件可以直接使用
defineExpose({
  dialogVisible,
  student
});
</script>